<template>
  <nly-content-wrapper>
    <nly-content>
      <div style="margin-top: 50px;">
        <a-tabs @change="callback" v-model="tabKey" tab-position="left" style="height: calc(100vh)">
          <a-tab-pane key="1" tab="基本信息">
            <label style="margin-top: 10px;">基本信息</label>
            <div class="tabpanel_tab_spacer"></div>
            <div style="width: 550px;overflow-y: scroll;height: calc(100vh - 16rem);">
              <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
                <a-form-item label="姓名">
                  <a-input v-model="emp.empName" style="border-radius:0;border: 0;" read-only />
                </a-form-item>
                <a-form-item label="性别">
                  <a-radio-group name="gender" :default-value="1" v-model="emp.gender">
                    <a-radio :value="1">男</a-radio>
                    <a-radio :value="0">女</a-radio>
                  </a-radio-group>
                </a-form-item>
                <a-form-item label="出生日期">
                  <a-input v-model="emp.birthday" />
                </a-form-item>
                <a-form-item label="民族">
                  <a-input v-model="emp.nation" />
                </a-form-item>
                <a-form-item label="籍贯">
                  <a-input v-model="emp.nativePlace" />
                </a-form-item>
                <a-form-item label="婚姻状况">
                  <a-radio-group name="maritalStatus" v-model="emp.maritalStatus">
                    <a-radio :value="0">未婚</a-radio>
                    <a-radio :value="1">已婚</a-radio>
                    <a-radio :value="2">其他</a-radio>
                  </a-radio-group>
                </a-form-item>
                <a-form-item label="身体状况">
                  <a-radio-group name="healthStatus" v-model="emp.healthStatus">
                    <a-radio :value="0">健康</a-radio>
                    <a-radio :value="1">不健康</a-radio>
                    <a-radio :value="2">其他</a-radio>
                  </a-radio-group>
                </a-form-item>  
                <a-form-item label="身高">
                  <a-input v-model="emp.height" />
                </a-form-item>
                <a-form-item label="体重">
                  <a-input v-model="emp.weight" />
                </a-form-item>
                <a-form-item label="身份证号码">
                  <a-input v-model="emp.certificatesNum" />
                </a-form-item>
                <a-form-item label="居住地址">
                  <a-input v-model="emp.residentialAddress" />
                </a-form-item>
                <a-form-item label="家庭地址">
                  <a-input v-model="emp.address" />
                </a-form-item>
                 <a-form-item label="紧急联系人">
                  <a-input v-model="emp.emergencyContact" />
                </a-form-item>
                <a-form-item label="紧急联系方式">
                  <a-input v-model="emp.emergencyContactPhone" />
                </a-form-item>
                <a-form-item label="E-mail">
                  <a-input v-model="emp.email" />
                </a-form-item>
                <a-form-item label="QQ号码">
                  <a-input v-model="emp.qq" />
                </a-form-item>
                <a-form-item label="微信">
                  <a-input v-model="emp.wechat" />
                </a-form-item>
                <a-form-item label="最高学历">
                  <a-input v-model="emp.education" />
                </a-form-item>
                <a-form-item label="毕业院校">
                  <a-input v-model="emp.graduatedFrom" />
                </a-form-item>
                <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
                  <a-button type="primary" html-type="submit" @click="saveEmp">保存</a-button>
                </a-form-item>
              </a-form>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="简历"></a-tab-pane>
          <a-tab-pane key="3" tab="入职登记表"></a-tab-pane>
          <a-tab-pane key="4" tab="银行卡号">
            <div style="margin-top: 20px">
              <a-button type="primary" class="crm-btn" @click="deleteBank">删除</a-button>
              <a-button type="primary" class="crm-btn" @click="AddBank">新增</a-button>
            </div>
            <a-table
              :columns="columns"
              :components="components"
              :data-source="data"
              :scroll="{ x: 500, y: 500}"
              style="height: calc(100vh - 16rem);"
              bordered
              :pagination="pagination"
              @change="onTableChange"
              :row-selection="{selectedRowKeys: selectedKeys, onChange: selection}"
            />
          </a-tab-pane>
        </a-tabs>
      </div>
      <a-modal v-model="commissionVisible" title="提现" centered>
        <a-input-number v-model="commission" style="width:300px" placeholder="请输入提现金额" />
        <template slot="footer">
          <a-button key="submit" type="primary" @click="withdrawal">立即提现</a-button>
          <a-button key="back" @click="() => (commissionVisible = false)">取消</a-button>
        </template>
      </a-modal>

      <a-modal
        v-model="eidtModelShow"
        centered
        on-ok="handleok"
        :title="editItem.id ? '编辑' : '新增'"
        width="960px"
      >
        <div id="components-form-demo-advanced-search">
          <a-form
            class="ant-advanced-search-form"
            :form="form"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 18 }"
            @submit="handleSubmit"
          >
            <a-row :gutter="24">
              <a-col :span="13" :pull="1">
                <a-form-item label="开户银行">
                  <a-input
                    v-decorator="['bankName', { rules: [{ required: true, message: '开户银行不能为空' }] }]"
                    placeholder="请输入开户银行"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="10">
                <a-form-item label="银行卡号">
                  <a-input
                    v-decorator="['bankCode', { rules: [{ required: true, message: '银行卡号不能为空' }] }]"
                    placeholder="请输入银行卡号"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="10">
                <a-form-item label="姓名">
                  <a-input
                    v-decorator="['userName', { rules: [{ required: true, message: '姓名不能为空' }] }]"
                    placeholder="请输入姓名"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <template slot="footer">
          <a-button type="primary" html-type="submit" @click="saveBankAccount">保存</a-button>
          <a-button :style="{ marginLeft: '8px' }" @click="handleReset">重置</a-button>
          <a-button :style="{ marginLeft: '8px' }" @click="() => (eidtModelShow = false)">关闭</a-button>
        </template>
      </a-modal>
    </nly-content>
  </nly-content-wrapper>
</template>

<script>
import { info, save } from "@/api/system/employee";
import { pageList, saveBank, deleteBank } from "@/api/personal/userBank";
import Vue from "vue";

const basePostData = {
  current: 1,
  size: 20
};

export default {
  data() {
    const columns = [
      {
        title: "开户银行",
        dataIndex: "bankName",
        key: "x",
        width: 120,
        align: "left",
        customRender: (text, row) => {
          return (
            <span>
              <i class={row.bankName || ""} style="margin-right:5px;"></i>
              <a href="javascript:;" onClick={() => this.EdiBank(row)}>
                {text}
              </a>
            </span>
          );
        }
      },
      {
        title: "银行卡号",
        dataIndex: "bankCode",
        key: "bankCode",
        width: 120
      },
      {
        title: "姓名",
        dataIndex: "userName",
        key: "userName",
        width: 120
      },
      {
        title: "创建时间",
        dataIndex: "createDate",
        key: "createDate",
        width: 120
      }
    ];

    return {
      userInfo: {},
      emp: {},
      commission: null, //提现金额
      totalCommission: 0, //佣金总收入
      withdrawalCommission: 0, //已提现佣金
      surplusCommission: 0, //剩余佣金
      bankAccount: "", //银行账号
      bankName: "", //银行名称
      commissionVisible: false,
      tabKey: "1",
      data: [],
      withdrawalData: [],
      postData: { ...basePostData },
      data: [],
      count: 0,
      columns,
      form: this.$form.createForm(this, { name: "advanced_search" }),
      pagination: {
        //分页信息
        defaultPageSize: 20,
        current: 1,
        pageSize: 20,
        total: 0,
        showTotal: total => {
          return (
            <div>
              共 {total} 条数据，每页
              <a-input-number
                value={this.pagination.pageSize}
                min={1}
                max={500}
                onPressEnter={e => this.changePageSize(e)}
              />
              条
            </div>
          );
        },
        showQuickJumper: true,
        showLessItems: true
      },
      eidtModelShow: false,
      editItem: {},
      selectedIds: [], //table选中id
      selectedData: [], //table选中数据
      selectedKeys: []
    };
  },
  mounted() {
    this.getEmpInfo();
  },
  methods: {
    //基本信息
    getEmpInfo() {
      info().then(response => {
        if (response.code == 200) {
          this.emp = {...response.data};
        }
      });
    },
    saveEmp() {
      save(this.emp).then(res => {
        this.$message.success("保存成功");
      });
    },
    //佣金提现申请
    withdrawal() {
      if (this.commission == null || this.commission == 0) {
        this.$message.error("提现金额必须大于100！");
        return;
      }
      if (this.commission > this.surplusCommission) {
        this.$message.error("可提现金额不足！");
        return;
      }
      withdrawalCommission({ amount: this.commission }).then(response => {
        if (response.code == 200) {
          this.commissionVisible = false;
          this.$message.success("提现成功，正在加速审核中");
        } else {
          this.$message.error(response.message);
        }
      });
    },
    //银行卡列表
    pageList() {
      const { postData } = this;
      pageList(postData)
        .then(response => {
          if (response.code === 200) {
            const { data } = response;
            const { records, total, current, size } = data;
            this.data = records;
            Object.assign(this.pagination, {
              total
            });
          }
        })
        .catch(error => {});
    },
    //添加银行卡
    AddBank() {
      this.editItem = {};
      this.handleReset();
      this.eidtModelShow = true;
    },
    //编辑银行卡
    EdiBank(data) {
      this.form = this.$form.createForm(this, {
        mapPropsToFields: () => {
          return {
            bankName: this.$form.createFormField({
              value: data.bankName
            }),
            bankCode: this.$form.createFormField({
              value: data.bankCode
            }),
            userName: this.$form.createFormField({
              value: data.userName
            })
          };
        }
      });
      this.editItem = { ...data };
      this.eidtModelShow = true;
    },
    //保存银行卡
    saveBankAccount(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          const id = this.editItem.id;
          this.editItem = { ...values };
          this.editItem.id = id;
          this.editItem.createDate = null;
          saveBank(this.editItem).then(response => {
            if (response.code === 200) {
              this.$message.success("保存成功");
              this.eidtModelShow = false;
              //刷新 列表
              this.pageList();
            } 
          });
        }
      });
    },
    //删除银行卡
    deleteBank() {
      if (this.selectedIds.length < 1) {
        this.$message.error("请选择要删除的银行卡");
        return;
      }
      let _this = this;
      this.$confirm({
        title: '提示',
        content: '您确定要删除该银行卡吗？',
        onOk() {
            deleteBank(_this.selectedIds).then(response => {
              if (response.code == 200) {
                _this.$message.success("删除成功");
                _this.pageList();
              }
            });
        },
        onCancel() {
        },
      });
    },
    //tab切换
    callback(key) {
      console.log(key);
      this.tabKey = key;
      if (key == 4) {
        this.pageList();
      }
    },
    //表单重置
    handleReset() {
      this.form.resetFields();
    },
    selection(keys, info) {
      this.selectedKeys = keys;
      const ids = new Array();
      info.forEach(function(val) {
        ids.push(val.id);
      });
      this.selectedIds = ids;
      this.selectedData = info;
    },
    //table分页触发
    onTableChange(pagination, filters, sorter) {
      Object.assign(this.postData, {
        current: pagination.current,
        size: pagination.pageSize
      });
      Object.assign(this.pagination, {
        current: pagination.current,
        pageSize: pagination.pageSize
      });
      this.PageList();
    },
    changePageSize(e) {
      const value = e.target.value;
      const { pagination } = this;

      console.log(e, value);
      Object.assign(this.postData, {
        size: value
      });
      Object.assign(this.pagination, {
        pageSize: Number.parseInt(value)
      });
      this.PageList();
    },
    reset() {
      this.postData = { ...basePostData };
    },
    onCellChange(key, dataIndex, value) {
      const dataSource = [...this.detailData];
      const target = dataSource.filter(item => key === item.key)[0];
      if (target) {
        target[dataIndex] = value;
        this.detailData = dataSource;
      }
    }
  }
};
</script>
<style lang="less" scoped>
.avatar-uploader > .ant-upload {
  width: 110px;
  height: 110px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}
.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
.user-class .ant-form-item {
  margin-bottom: 2px !important;
}
.form-inline label {
  justify-content: left !important;
}
.form-inline > .col {
  margin-bottom: 1.5rem !important;
}
.icons-list /deep/ .anticon {
  margin-right: 8px;
  font-size: 16px;
}
.ant-advanced-search-form {
  padding: 24px;
  background: #fbfbfb;
}

.ant-advanced-search-form .ant-form-item {
  display: flex;
}

.ant-advanced-search-form .ant-form-item-control-wrapper {
  flex: 1;
}

#components-form-demo-advanced-search .ant-form {
  max-width: none;
}
#components-form-demo-advanced-search .search-result-list {
  margin-top: 16px;
  background-color: #fafafa;
  min-height: 200px;
  text-align: center;
  padding-top: 80px;
}
// .crm-btn {
//   margin-left: 10px;
//   margin-bottom: 10px;
// }
::v-deep {
  .ant-form-item-label label{
    font-weight: normal !important;
  }
}
</style>